<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import { FirstAidKit, MedicineBox, Cpu, Message } from '@element-plus/icons-vue'
import SmartTools from './SmartTools.vue'

const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>

<template>
  <div class="welcome">
    <!-- 医院首页轮播图 -->
    <div class="banner-section">
      <el-carousel height="400px">
        <el-carousel-item>
          <div class="carousel-content" style="background-image: url('/img/banner1.jpg')">
            <div class="carousel-text">
              <h2>智慧医疗，健康未来</h2>
              <p>MediMind为您提供一站式医疗服务解决方案</p>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-content" style="background-image: url('/img/banner2.jpg')">
            <div class="carousel-text">
              <h2>专业医疗团队</h2>
              <p>拥有一流的专家团队，为您的健康保驾护航</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 服务简介 -->
    <div class="services-section">
      <h2 class="section-title">我们的服务</h2>
      <div class="services-grid">
        <div class="service-item">
          <el-icon size="48" color="#409EFF"><first-aid-kit /></el-icon>
          <h3>专业诊疗</h3>
          <p>提供全面的临床诊断和治疗服务</p>
        </div>
        <div class="service-item">
          <el-icon size="48" color="#409EFF"><medicine-box /></el-icon>
          <h3>药品配送</h3>
          <p>便捷的处方药品配送服务</p>
        </div>
        <div class="service-item">
          <el-icon size="48" color="#409EFF"><cpu /></el-icon>
          <h3>智能工具</h3>
          <p>基于AI的医疗数据处理工具</p>
        </div>
        <div class="service-item">
          <el-icon size="48" color="#409EFF"><message /></el-icon>
          <h3>在线咨询</h3>
          <p>专业医生在线解答您的健康问题</p>
        </div>
      </div>
    </div>

    <!-- 智能工具导航 - 引入新组件 -->
    <SmartTools />

    <!-- 热门科室 -->
    <div class="departments-section">
      <h2 class="section-title">热门科室</h2>
      <!-- 科室内容 -->
    </div>

    <!-- 其他首页内容 -->
  </div>
</template>

<script>
import { FirstAidKit, MedicineBox, Cpu, Message } from '@element-plus/icons-vue'
import SmartTools from './SmartTools.vue'

export default {
  name: 'TheWelcome',
  components: {
    FirstAidKit,
    MedicineBox,
    Cpu,
    Message,
    SmartTools
  }
}
</script>

<style scoped>
.welcome {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

.banner-section {
  margin-bottom: 40px;
}

.carousel-content {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 50px;
  color: white;
}

.carousel-text {
  max-width: 500px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.carousel-text h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.carousel-text p {
  font-size: 18px;
}

.section-title {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
  color: #303133;
}

.services-section {
  margin-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.service-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
  margin: 15px 0;
  font-size: 20px;
  color: #303133;
}

.service-item p {
  color: #606266;
}

.departments-section {
  margin-top: 40px;
}
</style>
